<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>当前求和为：{{number}}</h2>
        <button @click="add">点我number++</button>
        <button @click="sendStudentName ">把学生名给App</button>
        <button @click="unbind">解绑xuesheng事件</button>
        <button @click="death">销毁当前Student组件的实例</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'迪丽热巴',
                gender:'女',
                number:0
            }
        },
        methods:{
            sendStudentName(){
                // 触发Student组件实例对象身上的xuesheng事件
                this.$emit('xuesheng',this.name,666,888)
                // this.$emit('demo')

                // 也可以当成一个对象进行传递
                // this.$emit('xuesheng',{})

                this.$emit('click')
            },
            unbind(){
                this.$off('xuesheng')//解绑一个自定义事件
                // this.$off(['xuesheng','demo'])
                // this.$off()//解绑所有的自定义事件
            },
            death(){
                this.$destroy()//销毁了当前Student组件的实例，销毁后所有Student自定义事件都不奏效
            },
            add(){
                console.log('add回调被调用了')
                return this.number++
            }
        }
    }
</script>

<style lang="less">
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

